<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/shopping-cart.css">
</head>
<body>
    <div class="wrap">
        <!-- 购物车头部-->
        <header>
            <div class="top-content">
                <p class="page-title">购物车</p>
                <p class="delete-choose-goods">删除</p>
            </div>
        </header>
        <!-- 购物车内容和推荐内容 -->
        <div class="content-wrap">
            <!-- 购物车内容 -->
            <div class="shopping-cart-content">
                <ul>
                    <li>
                        <div class="choose-button"></div>
                        <img src="images/img.png" class="goods-img"></img>
                        <div class="goods-msg">
                            <p class="goods-name">广味小香肠广味小香肠广味小香肠</p>
                            <span class="price">29.99</span>
                            <p class="num-add-dec">
                                <span class="add">-</span>
                                <span class="num">1</span>
                                <span class="dec">+</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="choose-button"></div>
                        <img src="images/img.png" class="goods-img"></img>
                        <div class="goods-msg">
                            <p class="goods-name">广味小香肠广味小香肠广味小香肠</p>
                            <span class="price">29.99</span>
                            <p class="num-add-dec">
                                <span class="add"></span>
                                <span>1</span>
                                <span class="dec"></span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="choose-button"></div>
                        <img src="images/img.png" class="goods-img"></img>
                        <div class="goods-msg">
                            <p class="goods-name">广味小香肠广味小香肠广味小香肠</p>
                            <span class="price">29.99</span>
                            <p class="num-add-dec">
                                <span class="add"></span>
                                <span>1</span>
                                <span class="dec"></span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="choose-button"></div>
                        <img src="images/img.png" class="goods-img"></img>
                        <div class="goods-msg">
                            <p class="goods-name">广味小香肠广味小香肠广味小香肠</p>
                            <span class="price">29.99</span>
                            <p class="num-add-dec">
                                <span class="add"></span>
                                <span>1</span>
                                <span class="dec"></span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="choose-button"></div>
                        <img src="images/img.png" class="goods-img"></img>
                        <div class="goods-msg">
                            <p class="goods-name">广味小香肠广味小香肠广味小香肠</p>
                            <span class="price">29.99</span>
                            <p class="num-add-dec">
                                <span class="add"></span>
                                <span>1</span>
                                <span class="dec"></span>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 精选推荐 -->
            <div class="goods-push">
                <p class="push-titlt">精选推荐</p>
                <ul>
                    <li>
                        <img src="" alt="">
                        <p class="goods-name">广味小香肠广味小香肠广味小香肠</p>
                        <p class="price"></p>
                    </li>
                    <li>
                        <img src="" alt="">
                        <p class="goods-name">广味小香肠广味小香肠广味小香肠</p>
                        <p class="price"></p>
                    </li>
                    <li>
                        <img src="" alt="">
                        <p class="goods-name">广味小香肠广味小香肠广味小香肠</p>
                        <p class="price"></p>
                    </li>
                    <li>
                        <img src="" alt="">
                        <p class="goods-name">广味小香肠广味小香肠广味小香肠</p>
                        <p class="price"></p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 总计金额结算和底部home菜单 -->
        <footer>
            <div class="footer-content">
                <!-- 结算-->
                <div class="total-buy">
                    <div class="choose-button"></div>
                    <div class="sum-money-buy">
                        <div class="total"></div>
                        <p class="price">19.80</p>
                        <p>
                            <span>结算(</span>
                            <span>1</span>
                            <span>)</span>
                        </p>
                    </div>
                </div>
                <!-- home菜单 -->
                <div class="foot-menu">
                    <ul>
                        <li>
                            <div class="tab-img"></div>
                            <span>首页</span>
                        </li>
                        <li>
                            <div class="tab-img"></div>
                            <span>分类</span>
                        </li>
                        <li>
                            <div class="tab-img"></div>
                            <span>购物车</span>
                        </li>
                        <li>
                            <div class="tab-img"></div>
                            <span>我的</span>
                        </li>
                    </ul>
                </div>
            </div>
        </footer>

    </div>
    
</body>
</html>